<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的遍历和删除</title>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<ul id="extended_question">

</ul>
</body>
<script>
    let extendedQuestionUl = $('#extended_question');
    let data = [{
        id: 1,
        name: "s1"
    }, {
        id: 2,
        name: "s2"
    }, {
        id: 3,
        name: "s3"
    }];

    $(function () {
        dataInit();
        buttonInit();
    });
    
    function dataInit() {
        $.each(data, function (index, value) {
            let liTemp = `
                <li value="${value.id}">${value.name}<button class="delete">x</button></li>
            `;
            extendedQuestionUl.append(liTemp);
        });
    }

    function buttonInit() {
        $('.delete').on("click", function () {
            console.log($(this).parent().val());
            let deleteIndex;
            $.each(data, function (index, value) {
                if(value.id === parseInt($(this).parent().val())) {
                    deleteIndex = index;
                }
            });
            data.splice(deleteIndex, 1);
            $(this).parent().remove();
        })
    }

</script>
</html>